<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../03-3/css.css/vue.css">
    <!-- <script src="https://unpkg.com/vue@next"></script> -->
    <!-- <script src="https://cdn.jsdelivr.net"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.45/vue.global.min.js"></script>
</head>

<body>
    <div class="center">
        <h2 id="per">{{persional}}</h2>
        <div class="centerin">
            <h3 id="name">{{name}}</h3>
            <h3 id="age">{{age}}</h3>
            <h3 id="hib">{{hib}}</h3>
            <h3 id="career">{{career}}</h3>
        </div>
    </div>
    <script>
        const vm = Vue.createApp({
            data() {
                return {
                    persional: '个人基本信息',
                    name: '姓  名: 张某',
                    age: '年  龄: 20',
                    hib: '兴趣爱好: 吃饭、睡觉、打豆豆',
                    career: '专  业: 软件技术'
                }
            }
        }).mount(".center");


    </script>
</body>

</html>